<!--
 * @Author: 左瑞(zuorui) zuorui@mochasoft.com.cn
 * @Date: 2022-04-19 11:14:30
 * @LastEditors: 左瑞(zuorui) zuorui@mochasoft.com.cn
 * @LastEditTime: 2023-02-21 13:32:11
 * @Description: 蒙版组件
-->
<template>
  <div class="ct-dialog-wrap">
    <div
      v-show="visible"
      class="ct-dialog_bg"
      @click.self="handleWrapperClick">
    </div>
    <slot name="content"></slot>
  </div>
  
</template>

<script>

export default {
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    };
  },
  methods: {
    handleWrapperClick() {
      if (!this.closeOnClickModal) return;
      this.$emit('update:visible', false);
    },
  },
};
</script>

<style>
  .ct-dialog-wrap .ct-dialog_bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    background: #000;
    opacity: 0.7;
    color: #fff;
    font-size: 50px;
  }
</style>
